<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 100vw;
			height: 100vh;
			background: linear-gradient(to top, rgb(42, 32, 121), rgb(27, 21, 81));
			position: relative;
			overflow: hidden;
		}

		.circle-1 {
			width: 400px;
			height: 400px;
			border-radius: 100%;
			background: rgb(234, 15, 115);
			filter: blur(1px);
			position: absolute;

			right: 2px;
			bottom: 2px;
			animation: circleMove1 15s infinite linear;
			animation-direction: alternate;
		}

		@keyframes circleMove1 {
			0% {
				right: 0px;
				bottom: 50px;
			}

			30% {
				right: calc(100vw - 700px);
				bottom: calc(100vh - 400px);
			}

			50% {
				right: calc(100vw - 400px);
				bottom: calc(100vh - 500px);
			}

			95% {
				right: 100px;
				bottom: 0px;
			}

			100% {
				right: 0px;
				bottom: 50px;
			}
		}

		.circle-2 {
			width: 500px;
			height: 500px;
			border-radius: 100%;
			background: rgb(103, 239, 215);
			position: absolute;
			left: 0px;
			top: 300px;
			filter: blur(1px);

			animation: circleMove2 15s infinite linear;
			animation-direction: alternate;
		}

		@keyframes circleMove2 {
			0% {
				left: -20px;
				top: -80px;
			}

			20% {
				left: 100px;
				top: 300px;
			}

			50% {
				left: 10px;
				top: 20px;
			}

			70% {
				left: -200px;
				top: -180px;
			}

			100% {
				left: -20px;
				top: -80px;
			}
		}

		.circle-3 {
			width: 700px;
			height: 700px;
			background: rgb(255, 240, 111);
			border-radius: 100%;
			filter: blur(1px);
			position: absolute;
			animation: circleMove3 10s linear infinite;
		}

		@keyframes circleMove3 {
			0% {
				right: -50px;
				top: -80px;
			}

			20% {
				right: 50px;
				top: 80px;
			}

			40% {
				right: -10px;
				top: 100px;
			}

			80% {
				right: -150px;
				top: -20px;
			}

			100% {
				right: -50px;
				top: -80px;
			}
		}


		.circle-4 {
			width: 260px;
			height: 150px;
			border-radius: 100%;
			background: rgb(103, 239, 215);
			position: absolute;
			bottom: 200px;
			left: 200px;
			filter: blur(1px);
			animation: circleMove4 8s linear infinite;
			animation-direction: alternate;
		}

		@keyframes circleMove4 {
			0% {
				bottom: 200px;
				left: 200px;
				width: 260px;
				height: 150px;
			}

			50% {
				bottom: 300px;
				left: 100px;
			}

			100% {
				bottom: 200px;
				left: 200px;
				width: 150px;
				height: 260px;
			}
		}
	</style>
	<body>

		<div class="box">
			<div class="circle-1"></div>
			<div class="circle-2"></div>
			<div class="circle-3"></div>
			<div class="circle-4"></div>
		</div>


	</body>

</html>
